<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>

  <fmt:setBundle basename="ApplicationMessage" />
  <fmt:setLocale value="zh_CN" />

  <%@ include file="/WEB-INF/include/meta.jsp"%>
  <%@ include file="/WEB-INF/include/css.jsp"%>
  <link href="${ctx.resource}/css/select2.css" rel="stylesheet">
  <link href="${ctx.resource}/css/select2-bootstrap.css" rel="stylesheet">
  <title>租约详情 - 租房宝金融管理平台</title>
</head>
<body>

  <%@ include file="/WEB-INF/include/header.jsp"%>
  
  <div class="web-g-main">

    <%@ include file="/WEB-INF/include/aside.jsp"%>
    <div class="content">
      <header class="header clearfix">
          <h3 class="pull-left">租约详情</h3>
       </header>

       <c:if test="${not empty infoMessage}">
            <div class="alert alert-success alert-dismissable alert-fade top-margin-10 text-align-center">
              <button type="button" class="close" data-dismiss="alert">&times;</button>
              <i class="glyphicon glyphicon-info-sign"></i>&nbsp;&nbsp;
              <fmt:message key="${infoMessage}" />
            </div>
       </c:if>

       <div class="row">
         <div class="col-xs-12">
         
           <div class="panel panel-default feature-panel">
           
             <div class="panel-heading">
               <h3 class="panel-title">合同信息</h3>
             </div>
             
             <div class="panel-body">
             
               <div class="row">
                   <div class="text-align-right col-xs-1 col-md-1"><p>合同编号</p></div>
                   <div class="text-align-left col-xs-2 col-md-2"><p><strong>${contract.contractNo}</strong></p></div>
                   <div class="text-align-right col-xs-1 col-md-1"><p>租期</p></div>
                   <div class="text-align-left col-xs-4 col-md-4"><p><strong><fmt:formatDate value="${contract.beginDate}" pattern="yyyy/MM/dd" /></strong>至<strong><fmt:formatDate value="${contract.endDate}" pattern="yyyy/MM/dd" /></strong></p></div>
                   <div class="text-align-right  col-xs-1 col-md-1"><p>付款方式</p></div>
                   <div class="text-align-left col-xs-2 col-md-2"><p><strong><fmt:message key="${contract.paymentInstrument.key}" /></strong></p></div>
               </div>
               
               <div class="row">
                   <%-- <div class="text-align-right col-xs-2 col-md-2"><p>承租人</p></div>
                   <div class="text-align-left col-xs-2 col-md-2"><p><strong>${contract.customer.name}</strong></p></div> --%>
                   
                   <div class="text-align-right col-xs-1 col-md-1"><p>名称</p></div>
                   <div class="text-align-left col-xs-2 col-md-2"><p><strong>${contract.house.community}</strong></p></div>
                   <div class="text-align-right col-xs-1 col-md-1"><p>地址</p></div>
                   <div class="text-align-left col-xs-4 col-md-4"><p><strong>${contract.house.address}</strong></p></div>
                   <div class="text-align-right col-xs-1 col-md-1"><p>租金</p></div>
                   <div class="text-align-left col-xs-2 col-md-2"><p><strong>${contract.monthFee}元&nbsp;/&nbsp;月</strong></p></div>
               </div>
               
               <%-- <div class="row">
                   <div class="text-align-right  col-xs-2 col-md-2"><p>服务商</p></div>
                   <div class="text-align-left col-xs-2 col-md-2"><p><strong>${contract.app.name}</strong></p></div>
                   
                   
               </div> --%>
             
             </div>
           
           </div>
         </div>
       </div>

       <div class="row">
       
         <div class="col-xs-4">
           
           <div class="panel panel-default feature-panel">
             <div class="panel-heading">
               <h3 class="panel-title">租客信息</h3>
             </div>
             <div class="panel-body">
               <div class="row">
                   <div class="text-align-right col-xs-4 col-md-4"><p>姓名</p></div>
                   <div class="text-align-left col-xs-8 col-md-8"><p><strong>${contract.customer.name}</strong></p></div>
               </div>
               
               <c:forEach var="contractAccount" items="${data.getContractAccountsByContract(contract) }">
	                  		
		           <div class="row">
	                   <div class="text-align-right col-xs-4 col-md-4"><p>付款人</p></div>
	                   <div class="text-align-left col-xs-8 col-md-8"><p><strong>${contractAccount.payerName }</strong></p></div>
	               </div>       		
	           
		           <div class="row">
	                   <div class="text-align-right  col-xs-4 col-md-4"><p>付款卡号</p></div>
	                   <div class="text-align-left col-xs-8 col-md-8"><p><strong>${contractAccount.payAcNo }</strong></p></div>
	               </div>
	           </c:forEach>

               <%-- <div class="row">
                   <div class="text-align-right col-xs-2 col-md-2"><p>手机</p></div>
                   <div class="text-align-left col-xs-8 col-md-8"><p><strong>${contract.customer.mobile}</strong></p></div>
               </div>
               <div class="row">
                   <div class="text-align-right col-xs-2 col-md-2"><p>用户来源</p></div>
                   <div class="text-align-left col-xs-4 col-md-8"><p><strong>${contract.customer.source}</strong></p></div>
               </div> --%>
             </div>
           </div>
         </div>
         
         <!-- <div class="col-xs-4">
           <div class="panel panel-default feature-panel">
             <div class="earth-contract-circle">
               <div class="circle" id="circle2"></div>
               <p class="title">本次已付租</p>
             </div>
             <div class="earth-contract-circle">
               <div class="circle" id="circle1"></div>
               <p class="title">租约完成度</p>
             </div>
           </div>
         </div> -->
         
         <div class="col-xs-4">
           
           <div class="panel panel-default feature-panel">
             <div class="panel-heading">
               <h3 class="panel-title">商户信息</h3>
             </div>
             <div class="panel-body">
               <div class="row">
                   <div class="text-align-right col-xs-4 col-md-4"><p>名称</p></div>
                   <div class="text-align-left col-xs-8 col-md-8"><p><strong>${contract.app.name}</strong></p></div>
               </div>
	           <div class="row">
                   <div class="text-align-right col-xs-4 col-md-4"><p>地址</p></div>
                   <div class="text-align-left col-xs-8 col-md-8"><p><strong>${contract.app.company.address }</strong></p></div>
               </div>
               
               <c:set var="account" value="${data.getAccountOfAppForCollectRents(contract.app.company) }"></c:set>
               <div class="row">
                   <div class="text-align-right  col-xs-4 col-md-4"><p>账号</p></div>
                   <div class="text-align-left col-xs-8 col-md-8"><p><strong>${account.bank.shortName }&nbsp; ${account.accountNo}</strong></p></div>
               </div>
             </div>
           </div>
         </div>

         <div class="col-xs-4">
           
           <div class="panel panel-default feature-panel">
             <div class="panel-heading">
               <h3 class="panel-title">房源信息</h3>
             </div>
             <div class="panel-body">
               <div class="row">
                   <div class="text-align-right col-xs-3 col-md-3"><p>名称</p></div>
                   <div class="text-align-left col-xs-8 col-md-8"><p><strong>${contract.house.community}</strong></p></div>
               </div>
               <div class="row">
                   <div class="text-align-right col-xs-3 col-md-3"><p>地址</p></div>
                   <div class="text-align-left col-xs-8 col-md-8"><p><strong>${contract.house.address}</strong></p></div>
               </div>
               
               <div class="row">
                   <div class="text-align-right col-xs-3 col-md-3"><p>信息</p></div>
                   <div class="text-align-left col-xs-8 col-md-8"><p><strong>${contract.house.room}室${contract.house.hall}厅｜<fmt:message key="${contract.house.houseType.key}" />｜${contract.house.bulidArea}&nbsp;m&sup2;</strong></p></div>
               </div>
                               
             </div>
           </div>
             
         </div>         
       </div>
       
       <div class="row">
           <div class="col-xs-12">
             <table class="table table-striped demo2do-table bottom-margin-20">
               <thead>
                 <tr>
                   <th>订单号</th>
                   <th>租约号</th>
                   <th>应付款日</th>
                   <th>付款周期</th>
                   <th>订单金额</th>
                   <th>订单状态</th>
                   <th>操作</th>
                 </tr>
               </thead>
               <tbody>
                 <c:forEach var="order" items="${orderList}" varStatus="status">
                   <tr>
                     <td <c:if test="${order.id eq currentOrder.id}">class="current-order" </c:if>>${order.orderNo}<c:if test="${order.id eq currentOrder.id}"><span style="color:#ff961e;">当期</span></c:if></td>
                     <td>${order.contract.contractNo}</td>
                     <td><fmt:formatDate value="${order.dueDate}" pattern="yyyy/MM/dd" /></td>
                     <td><fmt:formatDate value="${order.startDate}" pattern="yyyy/MM/dd" /> - <fmt:formatDate value="${order.endDate}" pattern="yyyy/MM/dd" /></td>
                     <td>&yen;&nbsp;${order.totalRent}</td>
                     <td><fmt:message key="${order.orderStatus.key}" /></td>
                     <td>
                       <%-- <a href="${ctx}/orders/rent/1/detail">详情</a> --%>
                       <c:if test="${order.orderStatus.ordinal() == 0 }"><a href="${ctx}/orders/${order.id}/delete" data-target="#" data-toggle="modal" >删除</a></c:if>
                     </td>
                   </tr>
                 </c:forEach>
               </tbody>
             </table>
           </div>
         </div>

    <%@ include file="/WEB-INF/include/footer.jsp"%>
     
  </div>

</div>  

  <%@ include file="/WEB-INF/include/script.jsp"%>
  <script src="${ctx.resource}/js/bootstrap-alert-fade-trigger.js"></script>
  <script src="${ctx.resource}/js/circles.min.js"></script>
  <script src="${ctx.resource}/js/bootstrap-switch.min.js"></script>
  <script src="${ctx.resource}/js/bootstrap-modal-trigger.js"></script>
  <script src="${ctx.resource}/js/bootstrap.validate.js"></script>
  <script src="${ctx.resource}/js/bootstrap.validate.en.js"></script>
  <script src="${ctx.resource}/js/earth-preupload.js"></script>  
  
  
  <script>
  
    $(document).ready(function() {
      
      var myCircle = Circles.create({
        id:           'circle1',
        radius:       40,
        value:        32,
        maxValue:     100,
        width:        10,
        text:         function(value){return '<span class="circle-value">' + value + '</span><span style="font-size: .5em;"> %</span>';},
        colors:       ['#d6e9c6', '#3c763d'],
        duration:       400,
        wrpClass:     'circles-wrp',
        textClass:      'circles-text',
        styleWrapper: true,
        styleText:    true
      });
      
      var myCircle = Circles.create({
        id:           'circle2',
        radius:       40,
        value:        2500,
        maxValue:     3500,
        width:        10,
        text:         function(value){return '<span class="circle-value">' + 2.5 + '</span><span style="font-size: .5em;">K</span>';},
        colors:       ['#d6e9c6', '#3c763d'],
        duration:       400,
        wrpClass:     'circles-wrp',
        textClass:      'circles-text',
        styleWrapper: true,
        styleText:    true
      });
      
    });
  
  </script>
  
</body>
</html>
